<template>
  <div class="app-bg auto" id="modifypwd">
    <validator name="v">
    <div class="auto" style="background:#108ADD;text-align:center; padding:10px 0px;color:#FFF;font-size: 18px;">
      博能燃气手机抄表
    </div>
      <div class="app-input lala"
      :class="{'has-warning':$v.f_password.required,'has-error':$v.f_password.equalValid && !($v.f_password.required),
      'has-success': !$v.f_password.required && !($v.f_password.equalValid && !($v.f_password.required))}">
        <label class="control-label">原始密码</label>
        <input type="password" v-model="model.f_password"  v-validate:f_password="{ required: true, equalValid: pass }">
        <!-- <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.f_password.required && !($v.f_password.equalValid && !($v.f_password.required))"></span> -->
        <span v-if="$v.f_password.required">不能为空</span>
        <span v-if="$v.f_password.equalValid && !($v.f_password.required)">原始密码错误 !!</span>
      </div>
      <div class="app-input lala"
      :class="{'has-warning':$v.newpassword.required, 'has-success': !$v.newpassword.required}">
        <label class=" control-label">新密码</label>
        <input type="password"  v-model="model.newpassword"  v-validate:newpassword='{ required: true }'>
        <!-- <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.newpassword.required"></span> -->
        <span v-if="$v.newpassword.required">不能为空</span>
      </div>
      <div class="app-input lala"
      :class="{'has-warning':$v.affirmpassword.required,'has-error':$v.affirmpassword.equalValid && !($v.affirmpassword.required),
      'has-success': !$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))}">
        <label class=" control-label">确认密码</label>
        <input type="password" v-model="model.affirmpassword"  v-validate:affirmpassword="{ required: true, equalValid: model.newpassword }">
        <!-- <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))"></span> -->
        <span v-if="$v.affirmpassword.required">不能为空</span>
        <span v-if="$v.affirmpassword.equalValid && !($v.affirmpassword.required)">两次密码不一致 !!</span>
      </div>
      <div class="row app-btn" style="margin-bottom: -5px;">
        <button class="btn btn-primary col-xs-6" @click= "confirm()"><span class="glyphicon glyphicon-zoom-in" style="margin-right: 20px;"></span>确定</button>
        <button class="btn btn-primary col-xs-6" @click="this.$back()"><span class="glyphicon glyphicon-zoom-in" style="margin-right: 20px;"></span>取消</button>
      </div>
    </validator>
  </div>
</template>

<script>
import co from 'co'
import appData from '../../../src/components/appData'
import config from '../../../src/components/config'
let changepass = function * (self) {
  self.model.id = appData.loginUser.logininfo[0].id
  if(appData.loginUser.logininfo[0].f_newpassword === self.model.f_password && self.model.newpassword === self.model.affirmpassword){
  //config.resultUrl +
  yield self.$post( 'rs/logic/changepassword', {data: self.model},
  // yield self.$post('rs/logic/changepassword', {data:self.model},
   {resolveMsg: null, rejectMsg: null})
    .then((res)=>{
      self.$showMessage('修改成功')
      .then((resp)=>{
        appData.loginUser.logininfo[0].f_password = self.model.newpassword
        self.$back()
      })
    })
    .catch((ret)=>{
      self.$showMessage('修改失败，检查网络')
    })
  }else{
    self.$showMessage('请根据提示修改密码')
  }
}
export default {
  title: '修改密码',
  data(){
    return {
      model:{
        f_password:'',
        newpassword:'',
        affirmpassword: ''
      },
      pass:appData.loginUser.logininfo[0].f_newpassword
    }
  },
  methods: {
    confirm(){
      let gen = changepass(this)
      return co(gen)
    }
  }
}
</script>
<style scoped>
  .lala {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
  }
  .lala label {
    width: 100px;
    text-align: right;
  }
  .lala input {
    flex: 1;
    width: 1px;
  }
  .lala span {
    white-space: nowrap;
    color: red;
  }
</style>
